<template>
<div class="">
    <p>第一种方法</p>
    <p v-if="type === 'A'">优秀</p>
    <p v-else-if="type === 'B'">良好</p>
    <p v-else="type === 'C'">及格</p>
    <p>第二种方法</p>
    <p>{{ type == 'A' ? '优秀' : type == 'B' ? '良好' : '及格'}}</p>
    <button @click="type = 'A'">切换成优秀</button>
    <button @click="type = 'B'">切换成良好</button>
    <button @click="type = 'C'">切换成及格</button>
    <button @click="Type('A')">切换成A</button>
    <button @click="Type('B')">切换成B</button>
    <button @click="Type('C')">切换成C</button>
</div>
</template>

<script setup>
import { ref } from 'vue';
const type = ref('B')
const Type = (param) =>{
    type.value = param
}
</script>

<style scoped></style>
